<template>
  <div class='new-product'>
    <ProductHead />
    <main>
      <p class="title">基础信息</p>
      <ListModel key="lsitmodel_1" :modelData="modelData0" :readonly="readonly" />
      <p class="title">商品信息</p>
      <ListModel key="lsitmodel_2" :modelData="modelData1" :readonly="readonly" />
      <p class="title mt20">商品型号 <span class="iconfont icon-jia color-blue ft18 hover " @click="addVersion('3')" v-if="!readonly"><span class="ft12 color-999 ml5 add">新增</span></span></p>
      <Version key="version_1" :modelData="modelData3" :listData="info.data3" :readonly="readonly" />
      <p class="title mt20">商品介绍</p>
      <Editor :readonly="readonly" />
      <p class="title mt20">商品参数 <span class="iconfont icon-jia color-blue ft18 hover " @click="addVersion('4')" v-if="!readonly"><span class="ft12 color-999 ml5 add">新增</span></span></p>
      <Version key="version_2" :modelData="modelData4" :listData="info.data4" :readonly="readonly" />
    </main>

    <AddModel v-if="$store.state.dias.product.show" @editData0="reflashData" @editData1="reflashData1" />
  </div>
</template>
<script>
import ProductHead from '../../../buyer/specify/detail/head.vue'
import ListModel from './listmodel.vue'
import Version from './version.vue'
import Editor from '@/components/wangEditor.vue'
import AddModel from './dias/add'
export default {
  components: {ProductHead,ListModel,Version,Editor,AddModel},
  name: "",
  data() {
    return {
      readonly:false,
      modelData0:[
        {prop:"",label:"分类",isSelect:true,value:[],array:[]},
        {prop:"",label:"品名",isInput:true},
        {prop:"",label:"商品名称",isSelect:true,value:[],array:[]},
        {prop:"",label:"材质",isSelect:true,value:[],array:[]},
        {prop:"",label:"特性",isSelect:true,value:[],array:[]},
        {prop:"",label:"税点",isInput:true},
        {prop:"",label:"运费",isRadio:true,value:"1",array:[{label:"有运费",value:"1"},{label:"免运费",value:"2"}],change:"setFee"},
        {prop:"",label:"运费",isInput:true},
      ],
      modelData1:[
        {prop:"",label:"商品图片",isUpload:true},
        {prop:"",label:"商品介绍",isTextarea:true}
      ],

      modelData3:[ //型号
        {prop:"version",label:"型号"},
        {prop:"color",label:"颜色"},
        {prop:"price",label:"价格"},
        {prop:"",label:"操作",width:"50",isbtn:true,btns:[{label:"删除",class:"color-red",click:this.doDel3},{label:"修改",class:"color-blue",click:this.doEdit3,index:3}]},
      ],
      modelData4:[ //参数
        {prop:"name",label:"参数名称",width:"30",},
        {prop:"detail",label:"参数详情"},
        {label:"操作",width:"30",isbtn:true,btns:[{label:"删除",class:"color-red",click:this.doDel4},{label:"修改",class:"color-blue",click:this.doEdit3,index:4}]},
      ],
      info:{
        data3:[
          {'version':'test2',children:[
            {color:"color",price:"price"},
            {color:"color",price:"price"},
            {color:"color",price:"price"}
          ]},
        ],
        data4:[
          {'name':'test1'},
        ]
      },

    };
  },
  methods: {
    doChange(item){
      if(item.change)this[item.change](item)
    },

    /**
     * @name 调整运费
     */
    setFee(item){
      this.modelData0.length===7?this.modelData0.push({prop:"",label:"运费",isInput:true}):this.modelData0.pop()
    },

    doDel3(scope){
      let indexArray=scope.row.index0.split("_")
      if(indexArray.includes("-1")){
        this.info.data3.splice(indexArray[0],1)
      }else if(this.info.data3[indexArray[0]].children.length>1){
        this.info.data3[indexArray[0]].children.splice(indexArray[1],1)
      }else{
        this.info.data3.splice(indexArray[0],1)
      }
    },
    doDel4(scope){
      let indexArray=scope.row.index0.split("_")
      this.info.data4.splice(indexArray[0],1)
    },

    /**
     * @name 新增型号或者参数
     */
    addVersion(index){
      this.$store.state.dias.product.title="添加商品"+(index==3?'型号':'参数'),
      this.$store.state.dias.product.isversion=index==3
      this.$store.state.dias.product.show=true
    },

    doEdit3(scope,btn){
      this.$store.state.dias.product.title='修改商品'+(btn.index==3?"型号":"参数")
      this.$store.state.dias.product.isversion=btn.index==3
      this.$store.state.dias.product.content=scope.row
      this.$store.state.dias.product.show=true
    },

    /**
     * @name 编辑型号
     */
    reflashData(val){
      if(!val.index0){
        this.info.data3.push(val)
      }else{
        let indexArray=val.index0.split("_")
        this.$set(this.info.data3,indexArray[0],val)
      }
    },
    reflashData1(val){
      if(!val.index0){
        this.info.data4.push(val)
      }else{
        let indexArray=val.index0.split("_")
        this.$set(this.info.data4,indexArray[0],val)
      }
    },

    init(){
      this.readonly=_g.getRouterPath(this)=="/center/seller/product/productList/detail"
    }
  },
  created() {
    this.$nextTick(()=>{
      this.init()
    })
  }
};
</script>
<style lang="scss" scoped>
.new-product {

  main{
    padding: 20px 35px 60px 35px;
    
    .title{
      border-left: 2px solid $blue;
      text-indent: 15px;
      line-height: 35px;
      margin-bottom: 5px;

      .iconfont{
        margin-left: 565px;
      }
      .add{
        position: relative;
        top: -2px;
      }
    }
  }
}
</style>